<template>
    <div id="owner">
        <div id="owner-tabs">
            <span :class="show.tabs==='我的委托'?'tabsActive':''" @click="show.tabs='我的委托'">我的委托</span>
            <span :class="show.tabs==='申请委托'?'tabsActive':''" @click="show.tabs='申请委托'">申请委托</span>
        </div>
        <div id="owner-container">
                <el-form  v-if="show.tabs==='申请委托'" label-position="left" ref="form" :model="form" label-width="100px">
                    <!--<label>房源缩略图</label><input type="file">-->
                    <!--<label>房源内部图</label><input type="file">-->
                    <el-form-item label="房源标题" >
                        <el-input v-model="form.name" maxlength="25"></el-input>
                    </el-form-item>
                    <el-form-item label="地址">
                        <el-input v-model="form.location"></el-input>
                    </el-form-item>
                    <el-form-item label="价格">
                        <el-input type='number' oninput="if(value.length>5)value=value.slice(0,6)" v-model="form.price" placeholder="元/月"></el-input>
                    </el-form-item>
                    <el-form-item label="面积">
                        <el-input type='number' oninput="if(value.length>5)value=value.slice(0,5)" v-model="form.size" placeholder="平方米"></el-input>
                    </el-form-item>
                    <el-form-item label="房型">
                        <el-input type='text' maxlength="10" v-model="form.house_type" placeholder="例：三房两厅一卫"></el-input>
                    </el-form-item>
                    <el-form-item label="朝向">
                        <el-select v-model="form.toward" placeholder="朝向">
                            <el-option label="东" value="东"></el-option>
                            <el-option label="东南" value="东南"></el-option>
                            <el-option label="南" value="南"></el-option>
                            <el-option label="西南" value="西南"></el-option>
                            <el-option label="西" value="西"></el-option>
                            <el-option label="西北" value="西北"></el-option>
                            <el-option label="北" value="北"></el-option>
                            <el-option label="东北" value="东北"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="楼层高度">
                        <el-select v-model="form.height" placeholder="楼层高度">
                            <el-option label="高楼层" value="高楼层"></el-option>
                            <el-option label="低楼层" value="低楼层"></el-option>
                            <el-option label="中楼层" value="中楼层"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="房源图片">
                        <input @change='getImg($event)' type="file" ><span v-if="form.operate==='update'" style="color: #ff0a60;">*不选择则保留原有图片</span>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm()">立即{{form.operate === 'add'?'申请':'更新'}}</el-button>
                        <el-button @click="resetForm()">重置</el-button>
                    </el-form-item>
                </el-form>

                <div id="myHouse" v-if="show.tabs==='我的委托'">
                    <div  v-for="item in myHouseMsg" :key="item.id" class="myHouseItem">
                        <img :alt="item.name"  referrer="no-referrer" :src="item.thumb">
                        <div>
                            <h1><span>{{item.name}}</span></h1>
                    <p>{{item.house_type}} | {{item.size}}㎡ | {{item.height}}|  朝向&nbsp;{{item.toward}}</p>
                    <p>发布时间：{{item.addtime}}</p>
                    <p>地址：{{item.location}} </p>
                    <div>{{item.price}}元/月</div>
                            <a @click="updateMsg(item)">修改</a>
                       </div>
                    </div>
                </div>
        </div>
    </div>
</template>

<script>
    import AMap from 'AMap';
    export default {
        name: "owner",
        data(){
            return{
                show:{
                    tabs:'我的委托'
                },
                form:{
                    name:'',
                    location:'',
                    price:'',
                    house_type:'',
                    size:'',
                    toward:'',
                    height:'',
                    operate :'add',  //默认为添加房源
                    position_lon:'',
                    position_lat:''
                },
                file:'',
                myHouseMsg:{}
            }
        },
        computed:{
            token(){
                if(document.cookie.indexOf('login_state=true')===-1){
                    return ;
                }
                let reg=/(^| )login_token=([^;]*)(;|$)/;
                let tokenReady = document.cookie.match(reg);
                return tokenReady[2];
            }
        },
        methods:{
            /*提交表单*/
            submitForm(){
                if(!this.form.name){alert("标题未填写");return}
                if(!this.form.location){alert("地址未填写");return}
                if(!this.form.price){alert("价格未填写");return}
                if(!this.form.size){alert("面积未填写");return}
                if(!this.form.house_type){alert("房型未填写");return}else{
                    let reg=/^(.(房|厅|室|卫))+$/;
                    if(!reg.test(this.form.house_type)){
                        alert('房型填写格式不正确');
                        return;
                    }
                }
                if(!this.form.toward){alert("朝向未填写");return}
                if(!this.form.height){alert("楼层高未填写");return}
                if(this.form.operate==='add')
                {if(!this.file){alert("请先上传房源照片");return}}
                let geocoder = new AMap.Geocoder({
                    city: "广州",
                });
                geocoder.getLocation(this.form.location,(status,res)=>{
                    if(status === 'complete') {
                        this.form.position_lon = res.geocodes[0].location.lng;
                        this.form.position_lat = res.geocodes[0].location.lat;
                        this.form.token = this.token;
                        this.$axios.post(this.Global.api+'/index.php/index/uploadOrUpdateHouse',this.$qs.stringify(this.form),
                            {headers:{'Content-Type':'application/x-www-form-urlencoded'}})
                            .then(res=>{
                                if(res.status>=200&&res.status<300){
                                    if(res.data.res!==0){
                                        alert("图片上传失败");
                                    }else if(res.data.res === 0){
                                        if(this.form.operate === 'add') {
                                            alert("房源上传成功");
                                        }else{
                                            alert("房源更新成功");
                                        }
                                        this.refreshMyHouseMsg();
                                        this.show.tabs = '我的委托';
                                    }
                                }
                            })
                    }else{
                        alert("搜索不到地址位置，请确认地址无误")
                    }});
            },
            /*置空表单*/
            resetForm(){
                this.form = {
                    name:'',
                    location:'',
                    price:'',
                    house_type:'',
                    size:'',
                    toward:'',
                    height:'',
                    operate :'add', //置空默认改为添加房源
                    position_lon:'',
                    position_lat:''
                };
                this.file='';
            },
            /*获取房源缩略图并上传*/
            getImg(e){
                this.file = e.target.files[0];//真正上传的文件；
                if(!this.file)return;
                if(this.file.name.length > 50){
                    alert("图片名应在50个字符以内");
                    return;
                }
                if(this.file.size > 5242880){
                    alert("图片大小不能超过5M");
                    return;
                }
                let formData=new  FormData();
                formData.append('thumb',this.file);
                formData.append('token',this.token);
                this.$axios.post(this.Global.api+'/index.php/index/uploadOrUpdateHouse',formData,{headers:{'Content-Type':'application/x-www-form-urlencoded'}})
                    .then(res=>{
                       if(res.status>=200&&res.status<300){
                           if(res.data.res!==0){
                               alert("图片上传失败")
                           }
                       }
                    })
            },
            /*刷新房源信息*/
            refreshMyHouseMsg(){
                this.$axios.post(this.Global.api+'/index.php/index/getUserHouse',this.$qs.stringify({token:this.token}),{headers:{'Content-Type':'application/x-www-form-urlencoded'}})
                    .then(res=>{
                        if(res.status>=200&&res.status<300){
                            if(res.data.res===0){
                                this.myHouseMsg=res.data.data;
                            }
                        }
                    })
            },
            /*更新房源信息*/
            updateMsg(item){
                this.show.tabs = '申请委托';
                this.form.name=item.name;
                this.form.location=item.location;
                this.form.house_type=item.house_type;
                this.form.size=item.size;
                this.form.toward=item.toward;
                this.form.price=item.price;
                this.form.height=item.height;
                this.form.id=item.id;
                this.form.operate='update'; //更改为更新房源
            }
        },
        created(){
            this.refreshMyHouseMsg();
        },
        watch:{
            show:{
                deep:true,
                handler(){
                    if(this.show.tabs==='我的委托'){
                        this.resetForm();
                    }
                }
            }
        }
    }
</script>

<style scoped>
    #owner{
        width: 68%;
        min-width: 1000px;
        min-height:300px;
        margin: 10px auto;
        background-color: white;
        box-shadow: 2px 2px 2px rgba(0,0,0,0.14);
        padding-bottom: 1px ;
    }
    #owner-tabs{
        width: 90%;
        padding-top: 20px;
        /*padding-bottom: 10px;*/
        margin: 0 auto;
        border-bottom: 1px solid #ff0a60;
    }
    #owner-tabs span{
        display: inline-block;
        margin-right: 20px;
        cursor: pointer;
        padding: 3px 8px 5px 8px;
    }
    #owner-tabs  .tabsActive{
        background-color: #ff0a60;
        color: white;
        padding: 3px 8px 5px 8px;
        border-radius: 5px 5px 0 0;
    }
    #owner-container{
        width: 90%;
        margin: 10px auto;
    }
    #owner-container form.el-form{
        width: 60%;
        margin: 30px auto;
    }
    #owner-container form.el-form .el-form-item{
        margin-bottom: 30px;
    }
    #myHouse{
        width: 100%;
    }
    #myHouse>div.myHouseItem{
        width: 100%;
        min-width: 720px;
        margin: 0 auto;
        border-bottom: rgba(0,0,0,0.14) 1px solid;
    }
    #myHouse>div.myHouseItem img{
        width: 250px;
        height: 150px;
        margin: 0 25px;
        float:left;
    }
    #myHouse>div.myHouseItem>div{
        margin: 25px;
        height: 150px;
        position: relative;
    }
    #myHouse>div.myHouseItem>div h1{
        font-size: 1.5em;
        /*border: 1px solid;*/
        /*width: 700px;*/
    }
    #myHouse>div.myHouseItem>div h1 span{
        /*border: 1px solid;*/
        display: inline-block;
        width: calc(100% - 425px);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    #myHouse>div.myHouseItem>div p{
        margin: 10px;
        color: rgba(0,0,0,0.5);
    }
    #myHouse>div.myHouseItem>div>div{
        position: absolute;
        right:5px;
        top: 0;
        font-size: 1.7em;
        color: #ff0a60;
    }
    #myHouse>div.myHouseItem>div a{
        position: absolute;
        right: 30px;
        bottom: 10px;
        font-size: 1.2em;
    }
</style>